<template>
  <div class="details" :class="show ? 'hidden' : ''">
    <div v-if="visible">
      <z-container>
        <title-tpl :value="details.payproname"></title-tpl>
      </z-container>
      <z-container>
        <desc-tpl
          class="underline"
          label="开始时间"
          :value="details.begindate | formatTime"
        ></desc-tpl>
        <desc-tpl
          class="underline"
          label="截止时间"
          :value="details.enddate | formatTime"
        ></desc-tpl>
        <desc-tpl
          class="underline"
          label="门票金额"
          :value="details.payamt | formatPrice"
          fashion="stress"
        ></desc-tpl>
      </z-container>
      <z-container>
        <title-tpl value="内容介绍" :visible="false"></title-tpl>
        <p v-if="details.description !== ''" class="content-main">
          {{ details.description }}
        </p>
        <p v-else class="empty-desc">暂无介绍</p>
      </z-container>
      <div class="footers">
        <p class="button" :class="registerButton.class" @click="handleOnClick">
          {{ registerButton.text }}
        </p>
      </div>
      <oreo-popup position="bottom" v-model="show">
        <div class="popup-content">
          <div class="header">
            <img
              class="close-button"
              :src="closeButton"
              alt
              @click="show = false"
            />
            <p>填写报名信息</p>
          </div>
          <div class="main">
            <z-input
              v-for="(item, index) in details.componentlist"
              :key="index"
              :label="item.componentlabel"
              :required="item.required | formatRequire"
              v-model="item.componentvalue"
              :placeholder="item.placeholder"
            ></z-input>
          </div>
          <div class="footer">
            <div>
              合计
              <span class="price">{{ details.payamt | formatPrice }}</span>
            </div>
            <div class="submit-button" @click="handleOnSubmit">确认报名</div>
          </div>
        </div>
      </oreo-popup>
    </div>
  </div>
</template>
<script>
import TitleTpl from "@/components/titleTpl";
import DescTpl from "@/components/desc";
import ZContainer from "@/components/zcontainer/ZContainer.vue";
import { ZInput } from "@/components/form";
import { validateDate } from "@/utils";
export default {
  name: "detail",
  components: { TitleTpl, DescTpl, ZContainer, ZInput },
  data() {
    return {
      show: false,
      closeButton: require("@/assets/img/close-button.png"),
      param: {
        name: "",
        code: "",
        phone: ""
      },
      details: { payproname: "" },
      pay: {},
      visible: false
    };
  },
  computed: {
    registerButton() {
      if (this.pay.payflag == 2) {
        return {
          text: "查看报名凭证",
          class: "usable"
        };
      } else {
        let state = validateDate(this.details.begindate, this.details.enddate);
        switch (state) {
          case "0":
            return {
              text: "报名未开始",
              class: "disabled"
            };
            break;
          case "1":
            return {
              text: "我要报名",
              class: "usable"
            };
            break;
          case "2":
            return {
              text: "报名结束",
              class: "disabled"
            };
            break;
          default:
            break;
        }
      }
    }
  },
  activated() {
    document.title = "缴费详情";
    this.visible = false;
    this.show = false;
    this.t = this.$toast.loading({ duration: 0 });
    this.details = { payproname: "" };
    this.pay = {};

    this._getDetails();
    if (this.$route.query.partnerjourno) {
      this._getPayState();
    } else {
      this._payState();
    }
  },
  methods: {
    async _getPayState() {
      try {
        let { orderstatus } = await this.$http.getPayOrderDetail({
          orderNo: this.$route.query.partnerjourno
        });
        if (orderstatus == "2") {
          this.pay = { payflag: 2 };
        }
      } catch (error) {
        console.log("接口错误", error);
      }
    },
    async _getDetails() {
      try {
        let res = await this.$http.getProjectByID({
          payProId: this.$route.query.id
        });
        this.details = res.payproinfo;
        if (this.details.componentlist === void 0) {
          this.details.componentlist = [];
        }
        if (this.details.componentlist && this.details.componentlist.length > 0) {
          this.details.componentlist = this.details.componentlist.map(val => {
            val["placeholder"] = val.componentvalue;
            val["componentvalue"] = "";
            return val;
          });
        }
        this.visible = true;
        this.t.clear();
      } catch (error) {
        console.log(error);
      }
    },
    async _payState() {
      try {
        let res = await this.$http.getOrderListByProID({
          payProId: this.$route.query.id
        });
        // console.log(Object.prototype.toString.call(res.businessData[0]))
        // console.log(res.businessData[0])
        // this.pay = res.businessData[0];
        if (res.businessData[0]) {
          this.pay = res.businessData[0];
        }
      } catch (error) {}
    },
    handleOnClick() {
      let state = validateDate(this.details.begindate, this.details.enddate);
      if (this.pay.payflag == 2) {
        let orderno = this.$route.query.partnerjourno || this.pay.orderno;
        this.$router.push({
          path: "/certificate",
          query: { orderno: orderno }
        });
      } else if (state == "1") {
        if (this.details.componentlist && this.details.componentlist.length > 0) {
          this.show = true;
        } else {
          this.handleOnSubmit();
        }
      }
    },
    async _validate() {
      if(!this.details.componentlist) return false;
      let state = true;
      var index = this.details.componentlist.length;
      for (let i = 0; i < index; i++) {
        let val = this.details.componentlist[i];
        state =
          val.required == 1 &&
          (!val.componentvalue || val.componentvalue == "");
        if (
          val.required == 1 &&
          (!val.componentvalue || val.componentvalue == "")
        ) {
          this.$toast(`${val.componentlabel}不能为空`);
          break;
        }
      }
      return state;
    },
    async handleOnSubmit() {
      let validate = await this._validate();
      if (validate) return;
      let cl = null;
      if(this.details.componentlist) {
        cl = this.details.componentlist.map((val, index) => {
        return {
          componentbaseid: val.componentbaseid,
          componentvalue: val.componentvalue
        };
      });
      }
      let param = {
        returnurl: window.location.href,
        payInfoList: JSON.stringify([
          {
            payamt: this.details.payamt,
            componentlist: cl,
            payproid: this.details.id,
            interurl: this.details.interurl,
            txcode: this.details.payprocode
          }
        ])
      };
      try {
        let res = await this.$http.cashDesk(param);
        this.show = false;
        epaySdk.callPay(res.cashDeskData);
      } catch (error) {
        console.log(error);
      }
    }
  },
  watch: {
    show() {
      if (!this.show) {
        window.scrollTo(0, 0);
        window._input_index = undefined;
        window._input_focus = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../assets/less/base.less");
.hidden {
  overflow: hidden;
}
.details {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0.3rem;
  .underline {
    position: relative;
    &:not(:first-child) {
      padding-top: 0.3rem;
    }
    &:not(:last-child) {
      padding-bottom: 0.3rem;
    }
    &:not(:last-child)::after {
      .after;
    }
  }
  .content-main {
    font-size: 0.28rem;
    color: #666666;
    margin-top: 0.16rem;
    padding-bottom: 1rem;
  }
  .empty-desc {
    font-size: 0.28rem;
    color: #666666;
    margin-top: 0.2rem;
  }
  .footers {
    width: 100%;
    padding: 0.2rem;
    position: fixed;
    left: 0;
    bottom: -1px;
    background-color: #f9f9f9;
    .button {
      font-size: 0.32rem;
      color: #ffffff;
      padding: 0.2rem 0;
      border-radius: 0.42rem;
      text-align: center;
    }
    .disabled {
      background-color: #b5b5b5;
    }
    .usable {
      background: linear-gradient(
        315deg,
        rgba(255, 161, 92, 1) 0%,
        rgba(255, 128, 14, 1) 100%
      );
    }
  }
  .oreo-popup_bottom {
    position: fixed;
  }
  .popup-content {
    bottom: 0;
    width: 100%;
    max-height: 9rem;
    min-height: 6rem;
    background-color: #ffffff;
    .header {
      text-align: center;
      position: relative;
      font-size: 0.32rem;
      color: #222222;
      font-weight: 400;
      padding: 0.28rem;
      &::after {
        .after;
      }
      .close-button {
        width: 0.26rem;
        height: 0.24rem;
        position: absolute;
        left: 0.28rem;
        top: 0.38rem;
      }
    }
    .main {
      padding: 0.18rem 0.34rem;
    }
    .footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.28rem;
      color: #999999;
      padding: 0 0.44rem 0.4rem;
      background-color: #ffffff;
      .submit-button {
        width: 2.56rem;
        height: 0.84rem;
        line-height: 0.84rem;
        text-align: center;
        font-size: 0.32rem;
        color: #ffffff;
        background: linear-gradient(
          315deg,
          rgba(255, 161, 92, 1) 0%,
          rgba(255, 128, 14, 1) 100%
        );
        border-radius: 0.42rem;
      }
    }
  }
}
</style>
